<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- spriet animation上面有素材 -->
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 800px;
            height: 800px;
            background-color: silver;
            overflow: hidden;
        }
        .box1 div{
            width: 100px;
            height: 100px;
            margin-bottom: 100px;
            margin-left: 0px;
        }
        .box2{
           background-color: #bfa;
           /* 设置box2的动画 */
           /* animation-name:要对当前元素生效的关键帧的名字 */
           animation-name: test;

           /* animation-duration:动画的执行时间 */
           animation-duration: 2s;

           /* animation-delay:动画的延时 */
           /* animation-delay: 2s; */

           /* animation-timing-function: ease-in-out; */

           /* animation-iteration-count: 动画执行的次数;
                可选值
                    次数
                    infinite 无限执行
           */
           animation-iteration-count: 2;

           /* animation-direction: ;
                    指定运行的方向
                        默认值normal从from向to运行 每次都是这样
                        reverse 从to向from运行 每次都是这样
                        alternate 从from向to运行 重复执行动画时反向执行
                        alternate-reverse 从to向from运行 重复执行动画时反向执行
           */
           animation-direction: alternate-reverse;

           /* animation-play-state: ; 设置动画的执行状态 
                可选值,
                    running 默认值 动画执行
                    paused  动画暂停
           */
           /* animation-play-state: running; */
           
           /* animation-fill-mode: 动画的填充模式;
                可选值
                    none默认值 动画执行完毕元素会到原来位置
                    forwards    动画执行完毕元素会停止在结束的位置
                    backwards   动画延时等待时,元素会处于开始位置
                    both 结合了forwards  和backwards二个属性
           */
           animation-fill-mode:none;
           /* 
                简写和transition一样规则
           */

        }
        /*动画暂停触发器
         .box1:hover div{
            animation-play-state: paused;
        } */
        /* .box3{
            background-color: orange;
            transition-property: all;
            transition-duration: 2s;
        } */
        /* .box1:hover div{
           margin-left: 700px;
            /* background-color: orange; */
            /* margin-left: 0; */
        
        /* 
        动画
            动画和过渡类似,都是可以实现一些动态的效果
                不同的是过渡需要在某个属性发生变化时才会触发
                动画可以自动设置触发动态效果

            设置动画效果,必须先要设置一个关键帧,关键帧设置了动画执行的每一个步骤

        */    
        @keyframes test{
             /* from表示动画的开始位置,也可以使用0% */
             from{
                margin-left:0;
            }
             /* to表示动画的结束位置,也可以使用100% */
           to{
                margin-left: 700px;
            }
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2">
    </div>
</div>
    <!-- <div class="box3">
    </div> -->
</body>
</html>